<template>
  <section class="mode-select">
    <span class="title" :class="noTopic ? 'disabled' : 'active'">
      批改对错
    </span>
  </section>

  <section tabindex="-1" @keyup.enter="submitBlockScore" v-if="showBoard">
    <ScorePointInput
      :mark-model="true"
      :now-score="markingStatus"
      :topic-title="title"
      :show-board="showBoard"
    ></ScorePointInput>
  </section>

  <section class="submit-buttons">
    <button
      :disabled="noTopic || autoSubmitScore"
      @click="submitBlockScore"
      class="btn-submit"
    >
      提交批改
    </button>
    <div class="btn-scores">
      <div
        :disabled="noTopic"
        @click="setMarkStatus(TEACHER_CORRECT_TYPE.CORRECT)"
        class="btn-no-score btn-right"
        :class="noTopic ? 'disable' : ''"
      ></div>
      <div
        :disabled="noTopic"
        @click="setMarkStatus(TEACHER_CORRECT_TYPE.HALF)"
        class="btn-no-score btn-half"
        :class="noTopic ? 'disable' : ''"
      ></div>
      <div
        :disabled="noTopic"
        @click="setMarkStatus(TEACHER_CORRECT_TYPE.WRONG)"
        class="btn-no-score btn-wrong"
        :class="noTopic ? 'disable' : ''"
      ></div>
    </div>

    <el-checkbox
      v-model="autoSubmitScore"
      :disabled="noTopic"
      style="margin-left: 10px"
      >自动提交
    </el-checkbox>
  </section>
</template>

<script setup>
import ScorePointInput from './ScorePointInput.vue'
import { ElMessage } from 'element-plus'
import { ref, computed } from 'vue'
import { TEACHER_CORRECT_TYPE } from '@/views/assignment/single-correct/data'

const emits = defineEmits(['submitChange'])
const props = defineProps({
  // 是否显示
  showBoard: { type: Boolean, required: true },
  // 标题
  title: { type: String, required: true }
})

const preScore = ref(-1)
const autoSubmitScore = ref(preScore.value === -1)
const markingStatus = ref(null)

const setMarkStatus = status => {
  markingStatus.value = status
  autoSubmitScore.value && submitBlockScore()
}

const submitBlockScore = () => {
  if (markingStatus.value == null) {
    ElMessage.error('请批改对错再提交')
    return
  }
  // 成功后需要返回给父组件
  emits('submitChange', markingStatus.value)
}

// 如果是等待批改就显示
const noTopic = computed(() => {
  return !props.showBoard
})

const initData = score => {
  preScore.value = score
  markingStatus.value =
    props.showBoard && preScore.value >= 0 ? preScore.value : null
  autoSubmitScore.value = score < 0 ? true : false
}
defineExpose({ initData })
</script>

<style lang="less" scoped>
@baseURL: '@/assets/images/single-correct';
.mode-select {
  flex: 0 0 auto;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  .title {
    border-bottom: 6px solid transparent;
    padding: 17px 0 12px;
    font-size: 16px;
    font-weight: bold;
    color: #009cff;
    &.active {
      border-color: #009cff;
    }
    &.disabled {
      color: #d9d9d9 !important;
      border-color: #d9d9d9;
    }
  }
}
.submit-buttons {
  flex: 0 0 auto;
  .btn-submit {
    border: 0;
    cursor: pointer;
    margin-top: 16px;
    border-radius: 3px;
    width: 100%;
    height: 52px;
    background-color: #91d101;
    line-height: 50px;
    font-size: 22px;
    color: #fff;
    &:disabled {
      background-color: #e8e8e8 !important;
      color: #d9d9d9 !important;
      cursor: not-allowed;
    }

    &:focus,
    &:hover {
      filter: opacity(0.8);
    }

    &:active {
      filter: brightness(0.9);
    }
  }

  .btn-scores {
    display: flex;
    justify-content: space-between;
    .btn-no-score {
      margin: 16px 0;
      width: 90px;
      height: 72px;
      background-size: contain;
      cursor: pointer;
    }
    .btn-right {
      background-image: url('@{baseURL}/ic-right-normal.png');
      &:hover {
        background-image: url('@{baseURL}/ic-right-normal-1.png');
      }
      &:active {
        background-image: url('@{baseURL}/ic-right-normal-2.png');
      }
    }
    .btn-half {
      background-image: url('@{baseURL}/ic-half-press.png');
      &:hover {
        background-image: url('@{baseURL}/ic-hale-press-1.png');
      }
      &:active {
        background-image: url('@{baseURL}/ic-half-press-2.png');
      }
    }
    .btn-wrong {
      background-image: url('@{baseURL}/ic-wrong-normal.png');
      &:hover {
        background-image: url('@{baseURL}/ic-wrong-normal-1.png');
      }
      &:active {
        background-image: url('@{baseURL}/ic-wrong-normal-2.png');
      }
    }
  }
  .disable {
    filter: grayscale(90%);
  }
}
</style>
